<template>
	<div class='header'>
		<div style="float: left;">
			<el-scrollbar style="width: 1000px;">
				<span v-for="tag in tags" class='titleTag'>
					<el-tag :key="tag.name" :effect="getTagEffect(tag)" closable size="large" round @click="toJump(tag)" @close='toClose(tag)'>{{ tag.name }}</el-tag>
				</span>
				<span class='titleTag'>
					<el-tag v-if='tags.length >= 2' effect="light" size="large" round type="" @click="clearTag">关闭所有标签</el-tag>
				</span>
			</el-scrollbar>
		</div>
		<div style="float: right; overflow-x: hidden;">
			<el-dropdown @command="handleCommand" class='header_user' >
				  <span style="color: #409eff; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 28px;">{{ user_name }}
					  <el-icon size="16" style="position: relative; top: 3px;"><arrow-down /></el-icon>
					  <!-- <el-avatar :size="32" icon="UserFilled" style="background-color: #409eff;"></el-avatar> -->
				  </span>
				  <template #dropdown>
					<el-dropdown-menu>
					  <el-dropdown-item command="1">选择项目</el-dropdown-item>
					  <el-dropdown-item command="2" divided>修改密码</el-dropdown-item>
					  <el-dropdown-item command="2" divided>退出登录</el-dropdown-item>
					</el-dropdown-menu>
				  </template>
			</el-dropdown>
			<el-icon class='full' size='28' color="#409eff" @click="fullScreen"><FullScreen /></el-icon>
			<el-select v-model="env_id" class="env" placeholder="请选择环境" @change="changeEnv">
				<el-option
				  v-for="item in env_list.results"
				  :key="item.id"
				  :label="item.name"
				  :value="item.id"
				/>
			</el-select>
		</div>
	</div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
	data() {
		return {
			env_list: [],
			value: '',
		}
	},
	created(){
		this.getEnvs()
	},
	computed:{
		...mapState(['tags', 'user_name', 'projectInfo', 'env_id',]),
		currentPath() {
		      return this.$route.path;  
		},
	},
	methods: {
		getTagEffect(tag) {  
		      if (this.currentPath.includes(tag.path)) {  
		        return 'dark';   
		      } else {  
		        return 'light';  
		      }  
		},  
		changeEnv(value){
			this.$store.commit('saveEnvId', value)
		},
		play_menu(){
			document.getElementById('home_menu').style='display:block;'
		},
		display_menu(){
			document.getElementById('home_menu').style='display:none;'
		},
		toJump(tag) {
			this.$router.push({path: tag.path})
		},
		toClose(tag){
			this.$store.commit('delTags', tag)
			if (this.tags.length != 0 ){
				if (this.$route.path === tag.path){
					this.$router.push({path: this.tags[this.tags.length - 1].path})
				}
			}else{
				this.$router.push({name: 'index'})
				this.$store.commit('addTags', {path: '/project/index', name: '项目首页'})
			}
		},
		clearTag(){
			this.$store.commit('clearTags')
			this.$router.push({name: 'index'})
			this.$store.commit('addTags', {path: '/project/index', name: '项目首页'})
		},
		toProjects(){
			this.$router.push({name: 'myProject'})
		},
		exitLogin(){
			this.$router.push({name: 'login'})
		},
		fullScreen(){
			let full = document.fullscreenElement  
			       if(!full){
			            document.documentElement.requestFullscreen()
			        }else{
			            document.exitFullscreen()        
			        }
		},
		async getEnvs(){
			const response = await this.$api.getEnvs({project: this.projectInfo.id})
			if (response.status === 200){
				this.env_list = {...response.data}
			}
		},
		handleCommand(command){
			if (command === '1'){
				this.toProjects()
			}else if(command === '2'){
				this.exitLogin()
			}
		}
	},
}
</script>

<style scoped>
	.header{
		clear: both;
		height: 50px;
		min-width: 1500px;
		width: 100%;
		position: fixed;
		border-bottom: 1px solid rgb(204, 204, 204);
		background-color: white;
		padding: 9px 7px;
		box-sizing: border-box;
	}
	.header .el-tag--large.is-closable{
		margin-right: 7px;
	}
	.header span:hover{
		cursor: pointer;
	}
	.header .header_user{
		float: right;
		position: absolute;
		right: 250px;
		top: 11px;
	}
	.header .full{
		float: right;
		position: absolute;
		right: 380px;
		top: 11px;
	}
	.header .env{
		outline-color: #409eff;
		width: 120px;
		float: right;
		top: 9px;
		position: absolute;
		right: 430px;
	}
	.header .header_user:hover {
	  cursor: pointer;
	}
	.header_user span{
		outline: none;
	}
	/deep/ .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{
	    width: 0px !important;
		left: 500px !important;
	}
</style>